<template>
    <div class="edu-page-warp">
        <el-card shadow="never">
            <el-tabs v-model="messagesForm.msgType" @tab-click="queryMessages">
                <el-tab-pane
                    v-for="item in tabs"
                    :label="item.label"
                    :name="item.value"
                    :key="item.key"
                ></el-tab-pane>
            </el-tabs>
            <el-row type="flex" justify="end">
                <el-button :disabled="currentMsgs.length < 1" size="mini" @click="deleteMsg('S')">
                    删除
                </el-button>
                <el-button :disabled="currentMsgs.length < 1" size="mini" @click="markMsg('S')">
                    标记已读
                </el-button>
                <el-button size="mini" @click="deleteMsg('A')">全部删除</el-button>
                <el-button size="mini" @click="markMsg('A')">全部已读</el-button>
            </el-row>
            <edu-table
                ref="messagesTables"
                :data="messages"
                :total="messagesForm.total_"
                :pageNum="messagesForm.pageNum_"
                :pageSize="messagesForm.pageSize_"
                @page-change="handleCurrentChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="msgTitle" label="消息内容" :show-overflow-tooltip="true">
                    <template slot-scope="prop">
                        <el-button
                            type="text"
                            :class="{ 'text-gray': prop.row.tagStatus != 1 }"
                            @click="viewMessage(prop.row)"
                        >
                            {{ prop.row.msgTitle }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="类型" width="180">
                    <template slot-scope="prop">
                        {{ prop.row.msgType == '1' ? '系统公告' : '流程审批' }}
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" width="120" prop="createTime"></el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { findCommonMessageList, deleteCommonMessage, markRead } from 'common/src/api/public/message'
export default {
    data() {
        return {
            messagesForm: { pageSize_: 20, total_: 0, pageNum_: 1, msgType: '' },
            tabs: [
                { key: 'all', label: '全部消息', value: '' },
                { key: 'system', label: '系统公告', value: '1,3' },
                { key: 'workflow', label: '流程审批', value: '2' },
            ],
            messages: [],
            currentMsgs: [],
        }
    },
    mounted() {
        this.queryMessages()
    },
    methods: {
        async queryMessages() {
            let params = _.clone(this.messagesForm)
            if (params.msgType === '0') params.msgType = ''
            let { code, data } = await findCommonMessageList(params)
            if (code !== 200) return
            this.messages =
                data.list &&
                data.list.map((ele) => {
                    ele.createTime = new Date(ele.createTime).toLocaleDateString()
                    return ele
                })
            this.messagesForm.total_ = data.total_
            this.messagesForm.pageNum_ = data.pageNum_
            this.messagesForm.pageSize_ = data.pageSize_
        },
        handleCurrentChange(val) {
            this.messagesForm.pageSize_ = val.pageSize
            this.messagesForm.pageNum_ = val.pageNum
            this.queryMessages()
        },
        handleSelectionChange(list) {
            this.currentMsgs = list.map((ele) => {
                return ele.id
            })
        },
        /**
         * mode A:全部删除；S:选中删除
         */
        async deleteMsg(mode) {
            let params = {}
            if (mode == 'S') {
                params.ids = this.currentMsgs
            } else {
                params.msgType = this.messagesForm.msgType
            }
            let { code } = await deleteCommonMessage(params)
            if (code !== 200) return
            this.$message({ type: 'success', message: '删除成功' })
            this.reloadPage()
        },
        /**
         * mode A:全部已读；S:选中已读
         */
        async markMsg(mode) {
            let params = {}
            if (mode == 'S') {
                params.ids =  this.currentMsgs
            } else {
                params.msgType = this.messagesForm.msgType
            }
            let { code } = await markRead(params)
            if (code !== 200) return
            this.$message({ type: 'success', message: '标记成功' })
            this.reloadPage()
        },
        reloadPage() {
            this.$refs.messagesTables.clearSelection()
            this.currentMsgs = []
            this.queryMessages()
        },
        viewMessage(message) {
            this.markMsg('S', message.id)
            let path
            switch (messagesForm.msgType) {
                case '1':
                    path = '/messageDetail/'
                    break
                case '2':
                    path = `/TeacherRollDetail?id=${message.linkId}`
                    break
                case '3':
                    path = ''
                    this.$router.push({
                        name: message.linkId,
                        params: {
                            id: message.id,
                            msgSource: message.msgSource,
                        },
                    })
                    break
                default:
                    this.$message({
                        type: 'warning',
                        message: '未适配的消息类型',
                    })
                    break
            }
            if (path) {
                this.$router.push({
                    path: path,
                })
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.text-gray {
    color: #777;
}
</style>
